<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>十六博客网</title>
    <link rel="stylesheet" href="assets/css/bootstrap.min.css">
    <link rel="stylesheet" href="assets/utils/swipe/swiper.min.css">
    <link rel="stylesheet" href="assets/css/index.css">
    <link rel="stylesheet" href="assets/utils/nprogress/nprogress.css">
    <script src="assets/utils/nprogress/nprogress.js"></script>
</head>

<body>
    <script>
        NProgress.start()
    </script>
    <div class="container-fluid">
        <div class="row">
            <!-- 1、左边 -->
            <header class="col-md-2">
                <!-- 1-1-logo -->
                <div class="log">
                    <a href="index.html">十六博客</a>
                </div>
                <!--1-2-菜单nav -->
                <div class="nav">
                    <ul>
                        <li><a class="glyphicon glyphicon-camera" href="index.html">首页</a></li>
                        <li><a class="glyphicon glyphicon-picture" href="articList.html">新闻中心</a></li>
                        <li><a class="glyphicon glyphicon-glass" href="articList.html">新闻中心</a></li>
                        <li><a class="glyphicon glyphicon-th-large" href="articList.html">新闻中心</a></li>

                    </ul>
                </div>
            </header>
            <!-- 2、中间盒子 -->
            <article class="col-md-7">
                <!-- 2-1-新闻 -->
                <div class="news clearfix">
                    <ul>
                        <li>
                            <!-- swiper轮播图插件 -->
                            <div class="swiper-container">
                                <div class="swiper-wrapper" id="rotaImg">
                                    <div class="swiper-slide">
                                        <a href="javascript:;">
                                            <img src="./assets/uploads/1 (1).jfif" alt="">
                                        </a>
                                    </div>
                                    <div class="swiper-slide">
                                        <a href="javascript:;">
                                            <img src="./assets/uploads/7.jpg" alt="">
                                        </a>
                                    </div>
                                    <div class="swiper-slide">
                                        <a href="javascript:;">
                                            <img src="./assets/uploads/9.jpg" alt="">
                                        </a>
                                    </div>
                                </div>
                                <!-- 如果需要分页器 -->
                                <div class="swiper-pagination"></div>
                            </div>
                            <!-- swiper轮播图插件结束 -->

                        </li>
                        <li>
                            <a href="javascript:;"><img src="./assets/uploads/2.jpeg" alt="">
                                <p>十图片好好六的图片好好看啊</p>
                            </a>
                        </li>
                        <li>
                            <a href="javascript:;"><img src="./assets/uploads/3.jpg" alt="">
                                <p>十六的图片好好看啊</p>
                            </a>
                        </li>
                        <li>
                            <a href="javascript:;"><img src="./assets/uploads/4.jpg" alt="">
                                <p>十六的图片好好看啊</p>
                            </a>
                        </li>
                        <li>
                            <a href="javascript:;"><img src="./assets/uploads/5.jpg" alt="">
                                <p>十六的图片好好看啊</p>
                            </a>
                        </li>
                    </ul>
                </div>
                <!-- 2-2-热门推荐 -->
                <div class="hot-recommend">
                    <h3 class="title-bottom">热门推荐</h3>
                    <ul>

                        <li>
                            <a href="detail.html">
                                <img src="./assets/uploads/6.jpeg" alt="">
                                <p>好几点飞机的鬼斧神工三国杀国风大赏上dsgdfgs多个是否</p>
                            </a>
                        </li>
                        <li>
                            <a href="detail.html">
                                <img src="./assets/uploads/7.jpg" alt="">
                                <p>好几点飞机的鬼斧神工三国杀国风大赏上dsgdfgs多个是否</p>
                            </a>
                        </li>
                        <li>
                            <a href="detail.html">
                                <img src="./assets/uploads/8.png" alt="">
                                <p>好几点飞机的鬼斧神工三国杀国风大赏上dsgdfgs多个是否</p>
                            </a>
                        </li>
                    </ul>
                </div>
                <!-- 2-3-文章列表(最新发布) -->
                <div class="publish" >
                    <h3 class="title-bottom">文章列表</h3>
                    <!-- 2-3-1文章内容 -->
                    <div class="articList" id="publish">
                        <a href="detail.html">
                            <div class="row">
                                <div class="col-sm-9">
                                    <h3>特设的选择器啦啦啦啦啦，你一个滑铲？</h3>
                                    <p class="text-muted">汪十六发布于2020-03-08</p>
                                    <p class="hidden-xs">
                                        噶UN地方撒开合适的福克斯符合客观开始到后来发生的离开过后好的老师看过后三个号但是离开韩国楼上的国际法公司电话
                                    </p>
                                    <p class="text-muted">阅读(123) 评论(332) 点赞(23423) 标签：插画/图片/手绘</p>
                                </div>

                                <div class="col-sm-3 artic-img hidden-xs">
                                    <img src="./assets/uploads/9.jpg" alt="">
                                </div>
                            </div>
                        </a>
                    </div>


                </div>
            </article>
            <!-- 3、右边盒子 -->
            <aside class="col-md-3  hidden-sm hidden-xs">
                <!-- 3-1-标题 -->
                <a href="javascript:;" class="hot">
                    <span class="btn btn-primary">热搜</span>
                    <h4>欢迎来到十六号博客</h4>
                    <p class="text-muted">是否发生过第三个地方个豆腐干豆腐花电饭锅电饭锅</p>
                </a>
                <!-- 3-2-随机推荐 -->
                <div class="random-recommend">
                    <h3 class="title-bottom">随机推荐</h3>
                    <ul id="randoomRec">

                        <li>
                            <a href="detail.html">
                                <div class="row">
                                    <div class="col-sm-8 recomm-artic">
                                        <h4>卡发斯蒂芬而过东风东方故事刚刚好的哈</h4>
                                        <p class="text-muted">阅读(291)</p>
                                    </div>
                                    <div class="col-sm-4 recomm-img">
                                        <img src="assets/uploads/2.jpeg" alt="">
                                    </div>
                                </div>
                            </a>
                        </li>
                        <li>
                            <a href="detail.html">
                                <div class="row">
                                    <div class="col-sm-8 recomm-artic">
                                        <h4>卡发斯蒂芬而过东风东方故事刚刚好的哈</h4>
                                        <p class="text-muted">阅读(291)</p>
                                    </div>
                                    <div class="col-sm-4 recomm-img">
                                        <img src="assets/uploads/2.jpeg" alt="">
                                    </div>
                                </div>
                            </a>
                        </li>
                        <li>
                            <a href="detail.html">
                                <div class="row">
                                    <div class="col-sm-8 recomm-artic">
                                        <h4>卡发斯蒂芬而过东风东方故事刚刚好的哈</h4>
                                        <p class="text-muted">阅读(291)</p>
                                    </div>
                                    <div class="col-sm-4 recomm-img">
                                        <img src="assets/uploads/2.jpeg" alt="">
                                    </div>
                                </div>
                            </a>
                        </li>
                        <li>
                            <a href="detail.html">
                                <div class="row">
                                    <div class="col-sm-8 recomm-artic">
                                        <h4>卡发斯蒂芬而过东风东方故事刚刚好的哈</h4>
                                        <p class="text-muted">阅读(291)</p>
                                    </div>
                                    <div class="col-sm-4 recomm-img">
                                        <img src="assets/uploads/2.jpeg" alt="">
                                    </div>
                                </div>
                            </a>
                        </li>
                    </ul>
                </div>
            </aside>
        </div>
    </div>

    <!-- js -->
    <script src="assets/js/jquery.min.js"></script>
    <script src="assets/js/bootstrap.min.js"></script>
    <script src="assets/utils/swipe/swiper.min.js"></script>
    <script src="assets/js/home.js"></script>
    <script src="assets/utils/art-template/template-web.js"></script>
    <script src="assets/js/recommend.js"></script>
    <!-- 轮播图模板-开始 -->
    <script type="text/html" id="rotaTpl">
        {{each data}}
        <div class="swiper-slide">
            <a href="{{$value.link}}">
                <img src="{{$value.image}}" alt="">
            </a>
        </div>
        {{/each}}
    </script>
    <!-- 轮播图模板-结束 -->
    <script>
        NProgress.done()
    </script>
</body>

</html>